import React, { Component } from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';

import MyECharts from '@components/my-echarts';
import { TASK_COMPARE_TYPES } from '@util/constants';

const selectedItemStyle = {
  opacity: 1
};

const notSelectedItemStyle = {
  opacity: 0.5
};

class LatestResult extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedSeriesIndex: 0,
      selectedDataIndex: 0
    };
  }

  // eslint-disable-next-line
  UNSAFE_componentWillReceiveProps() {
    const { filter = {}, data = [] } = this.props;
    const { compare, created } = filter;
    const creates = data.map(i => i.created);
    const selectedSeriesIndex = TASK_COMPARE_TYPES.indexOf(compare) + 1;
    const selectedDataIndex = creates.indexOf(created);
    this.setState({
      selectedSeriesIndex,
      selectedDataIndex
    });
  }

  getItemStyle = (seriesIndex, dataIndex) => {
    const { selectedSeriesIndex, selectedDataIndex } = this.state;
    if (selectedSeriesIndex === seriesIndex && selectedDataIndex === dataIndex) {
      return selectedItemStyle;
    } else {
      return notSelectedItemStyle;
    }
  };

  getSeries = (name, data) => {
    return {
      type: 'bar',
      seriesLayoutBy: 'row',
      name: name,
      barMaxWidth: 64,
      label: { show: true, position: 'top', color: '#999EA8' },
      data: data,
      fontSize: 14
    };
  };

  getOption = () => {
    const { data = [], scanType = '' } = this.props || {};

    const xAxisData = [];
    const currentCount = [];
    const appearCount = [];
    const disappearCount = [];
    const vulCount = [];
    _.sortBy(data, 'lastEnd').forEach((item = {}, dataIndex) => {
      xAxisData.push(_.get(item, 'lastEnd', '-'));

      currentCount.push({
        value: _.get(item, 'targetCount', 0),
        itemStyle: this.getItemStyle(0, dataIndex)
      });
      appearCount.push({
        value: _.get(item, 'appearTargetsCount', 0),
        itemStyle: this.getItemStyle(1, dataIndex)
      });
      disappearCount.push({
        value: _.get(item, 'disappearTargetsCount', 0),
        itemStyle: this.getItemStyle(2, dataIndex)
      });
      vulCount.push({
        value: _.get(item, 'currentOnedayCount', 0),
        itemStyle: this.getItemStyle(2, dataIndex)
      });
    });

    const option = {
      legend: {
        left: 0,
        data: [
          { name: '本轮探测存活', icon: 'circle' },
          { name: '相对上轮新发现的目标', icon: 'circle' },
          { name: '相对上轮存活变为未知的目标', icon: 'circle' },
          scanType === 'VulDetect' && { name: '本轮检测漏洞个数', icon: 'circle' }
        ]
      },
      tooltip: {},
      color: ['#0B6FD6', '#11AB4E', '#959595', '#EC808D'],
      interval: 1,
      barCategoryGap: '40%',
      xAxis: {
        type: 'category',
        axisTick: false,
        data: xAxisData,
        axisLine: {
          lineStyle: {
            color: '#E6EAEF'
          }
        },
        axisLabel: {
          color: '#686C78',
          fontSize: 14,
          interval: 0
        }
      },
      yAxis: { show: false },
      grid: { top: 35, right: 10, left: 10, bottom: 25 },
      series: [
        this.getSeries('本轮探测存活', currentCount),
        this.getSeries('相对上轮新发现的目标', appearCount),
        this.getSeries('相对上轮存活变为未知的目标', disappearCount),
        scanType === 'VulDetect' && this.getSeries('本轮检测漏洞个数', vulCount)
      ]
    };
    return option;
  };

  onClickChart = e => {
    const { seriesIndex: selectedSeriesIndex, dataIndex: selectedDataIndex, seriesName } = e;
    this.setState({ selectedSeriesIndex, selectedDataIndex });
    if (typeof this.props.onClick === 'function') {
      this.props.onClick({ seriesName, selectedSeriesIndex, selectedDataIndex });
    }
  };

  render() {
    const option = this.getOption();
    return <MyECharts option={option} onClick={this.onClickChart} />;
  }
}

LatestResult.propTypes = {
  data: PropTypes.array,
  onClick: PropTypes.func,
  filter: PropTypes.object,
  scanType: PropTypes.string
};

export default LatestResult;
